<template>
	<view class="pagesBox">
		<view class="pagesMain">
			<view class="addCarBox" @click="toAddPage">
				<uni-icons type="plus" size="46" color="#c0c4cc"></uni-icons>
				<view>新增</view>
			</view>
			<view class="addressBox" style="">
				<block v-for="(item,index) in addressList" :key="index">
					<view class="addressItem">
						<view class="addressInfoBox" @tap.stop="choose(item)">
							<view class="infoTop">
								<view class="infoName">{{item.name}}</view>
								<view class="infoPhone">{{item.phone}}</view>
							</view>
							<view class="addressDetail">{{item.address}}</view>
						</view>
						<view class="addressBottom">
							<view class="defaultBox" v-if="item.is_default == 1">
								<view class="defaultTitle">默认</view>
								<!-- <u-switch v-model="item.is_default == 1" size="30" active-color="#CDB583" inactive-color="#A1A5AA" @change="changeSwitch($event,item)"></u-switch> -->
							</view>
							<view></view>
							<view class="Box" style="display: flex;color: #A1A5AA;">
								<view class="delete del" @click.stop="delAddressInfo = item,showExplainTip = true">删除地址</view>
								<view class="modify del" @click.stop="changeAddress(item)">修改</view>
							</view>
						</view>
					</view>
				</block>
				<uni-load-more v-if="total > 0" :status="statusType"></uni-load-more>
				<view v-if="addressList.length == 0" style="margin-top: 200rpx;"><u-empty text="暂未添加地址" mode="address"></u-empty></view>
			</view>
			<u-popup v-model="showExplainTip" mode="center" :mask-close-able="false">
				<view class="xieyiBox">
					<view class="xieyiMain">
						<view class="titleBox">确认删除该地址？</view>
						<view class="xieyiBody">
							<view class="popupInput">
								<view class="inputTitle">姓名</view>
								<u-input v-model="delAddressInfo.name" :clearable="false" :custom-style="inputStyle" type="text" disabled :border='false' :height="96"></u-input>
							</view>
							<view class="popupInput">
								<view class="inputTitle">手机号</view>
								<u-input v-model="delAddressInfo.phone" :clearable="false" :custom-style="inputStyle" type="text" disabled :border='false' :height="96"></u-input>
							</view>
							<view class="popupInput">
								<view class="inputTitle">地址</view>
								<u-input v-model="delAddressInfo.address" :clearable="false" :custom-style="inputStyle" type="textarea" disabled :border='false' :height="96"></u-input>
							</view>
						</view>
						<view class="btnBox">
							<view class="btn btn1" @click="showExplainTip = false">取消</view>
							<view class="btn btn2" @click="deleteAddress">确定</view>
						</view>
					</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				inputStyle:{background:'#F7F8FA',borderRadius:'6rpx',paddingLeft:'24rpx'},
				addressList: [],
				params:{
					listRows:10,
					page:1,
				},
				total:-1,
				statusType:'more',
				// 判断从哪个页面来
				comePage:'',
				showExplainTip:false,
				delAddressInfo:{},
			}
		},
		onLoad(options) {
			if(options.comePage){
				this.comePage=options.comePage
			}
		},
		onShow() {
			this.getAddressList();
		},
		methods: {
			async getAddressList(){
				let res = await uni.$http('POST','address/list');
				if(res.code == 1){
					this.addressList = res.data;
				}else{
					this.total = 0;
				}
			},
			async changeSwitch(e,item) {
				let res = await uni.$http('POST',"address/setDefault",{id:item.id});
				if(res.code == 1){
					this.getAddressList()
				}
			},
			async deleteAddress() {
				let res = await uni.$http('POST',"address/del",{id: this.delAddressInfo.id});
				if (res.code == 1) {
					uni.$u.toast('删除成功')
					this.showExplainTip = false;
					this.getAddressList()
				} else {
					uni.$u.toast(res.msg)
				}
			},
			async choose(item) {
				console.log(item);
				if(this.comePage == 'confirm'){
					let pages = getCurrentPages()
					let prePage = pages[pages.length - 2];
					prePage.$vm.addressInfo.phone = item.phone;
					prePage.$vm.addressInfo.name = item.name;
					prePage.$vm.addressInfo.address = item.address;
					prePage.$vm.submitParams.address_id = item.id;
					prePage.$vm.isRefresh = false;
					uni.navigateBack()
				}
			},
			changeAddress(item) {
				uni.navigateTo({
					url: "/pagesMy/address/add?type=2&id=" + item.id
				})
			},
			// 去添加地址页面
			toAddPage(){
				uni.navigateTo({
					url:"/pagesMy/address/add?type=1"
				})
			}
		},
		onReachBottom() {
			if(this.addressList.length < this.total){
				this.statusType = 'loading';
				this.params.page++;
				this.getAddressList()
			}else{
				this.statusType = 'noMore'
			}
		}
	}
</script>

<style scoped lang="scss">
	.pagesMain {
		padding: 12rpx 24rpx;
		position: relative;
		.addCarBox{
			height: 160rpx;
			font-weight: 400;
			font-size: 24rpx;
			color: #c0c4cc;
			border: 2rpx dashed #c0c4cc;
			border-radius: 16rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}
		.addressBox{
			margin-top: 24rpx;
			.addressItem{
				background-color: #FFFFFF;
				border-radius: 16rpx;
				padding: 0 32rpx;
				margin-bottom: 20rpx;
				.addressInfoBox{
					border-bottom: 2rpx solid #F5F5F5;
					padding: 20rpx 0;
					display: flex;
					flex-direction: column;
					justify-content: center;
					.infoTop{
						display: flex;
						align-items: center;
						.infoName{
							color: #000;
							font-size: 32rpx;
						}
						.infoPhone{
							color: #000;
							font-size: 30rpx;
							margin-left: 36rpx;
						}
					}
					.addressDetail{
						color: #000;
						font-size: 30rpx;
						margin-top: 20rpx;
					}
				}
				.addressBottom{
					height: 68rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					.defaultBox{
						color: #000;
						display: flex;
						align-items: center;
						.defaultTitle{
							color: #aaa;
							margin-right: 12rpx;
						}
					}
					.Box{
						font-size: 22rpx;
						.del{
							display: flex;
							justify-content: center;
							align-items: center;
						}
						.delete {
							width: 112rpx;
							height: 40rpx;
							border: 2rpx solid #E7E8E9;
							border-radius: 8rpx;
						}
						
						.modify {
							width: 80rpx;
							height: 40rpx;
							border: 2rpx solid #E7E8E9;
							border-radius: 8rpx;
							margin-left: 16rpx;
						}
					}
				}
			}
		}
		.xieyiBox{
			width: 80vw;
			.xieyiMain{
				// background: linear-gradient( 180deg, #2BA777 0%, #fff 62%, #fff 100%);
				background-color: #fff;
				border-radius: 16rpx;
				.titleBox{
					height: 80rpx;
					font-weight: 600;
					font-size: 34rpx;
					color: #16202B;
					display: flex;
					justify-content: center;
					align-items: center;
				}
				.xieyiBody{
					padding: 12rpx 24rpx;
					.popupInput{
						margin-bottom: 16rpx;
						position: relative;
						.inputTitle{
							font-weight: 600;
							font-size: 28rpx;
							color: #16202B;
							margin-bottom: 10rpx;
						}
						// 自定义输入框
						.myInputBox{
							display: flex;
							justify-content: space-between;
							align-items: center;
							.myInputMain{
								width: 100%;
								height: 96rpx;
								font-weight: 400;
								font-size: 32rpx;
								color: #000;
								background-color: #F7F8FA;
								// border: 2rpx solid #dcdfe6;
								border-radius: 16rpx;
								// padding: 0 24rpx;
								padding-right: 24rpx;
								display: flex;
								justify-content: space-between;
								align-items: center;
								.codeBox{
									font-size: 26rpx;
									color: #2BA777;
								}
								.inputBtn{
									font-size: 24rpx;
									color: #fff;
									background-color: #2BA777;
									border-radius: 16rpx;
									padding: 12rpx 36rpx;
								}
								.inputHover{
									background-color: #37d898;
								}
							}
						}
						// 字数
						.textNum{
							color: #A1A5AA;
							position: absolute;
							bottom: 12rpx;
							right: 16rpx;
						}
					}
				}
				.btnBox{
					width: 100%;
					height: 110rpx;
					border-top: #E7E8E9 solid 2rpx;
					padding: 0% 32rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					.btn{
						width: 49%;
						height: 80rpx;
						border-radius: 48rpx;
						font-size: 30rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 600;
						display: flex;
						justify-content: center;
						align-items: center;
					}
					.btn1{
						color: #2BA777;
						border: 2rpx solid #2BA777;
					}
					.btn2{
						color: #FFFFFF;
						background-color: #2BA777;
						border: 2rpx solid #2BA777;
					}
				}
			}
		}
	}
</style>
<style>
	page{
		background-color: #f7f8fa;
	}
</style>